<template>
		<page-meta :page-style="'overflow:'+(showPopup?'hidden':'visible')"></page-meta>
	<view>
		<view class="p-4 flex flex-row flex-x-space-between" >
			<view :style="{width: boxWidth + 'px'}">
				<view class="p-4 bg-white item mb-2 content rounded-3" v-for="(item,index) in list1" :key="index"
					 @click="selectQuestions(item)">
					<image :style="{width: boxWidth - 24 + 'px'}" mode="widthFix" v-if='item.imageurl'
						:src="item.imageurl"></image>
					<span class="type text-white p-1 pr-2 pl-2 rounded-2">{{item.styleText}}</span>
					{{item.question}}
				</view>
			</view>
			<view :style="{width: boxWidth + 'px'}">
				<view class="p-4 bg-white item mb-2 content rounded-3 " v-for="(item,index) in list2" :key="index"
					 @click="selectQuestions(item)">
					<image :style="{width: boxWidth - 24 + 'px'}" mode="widthFix" v-if='item.imageurl'
						:src="item.imageurl"></image>
					<span class="type text-white p-1 pr-2 pl-2 rounded-2">{{item.styleText}}</span>
					{{item.question}}
				</view>
			</view>
		</view>
		<uni-load-more color="#007AFF" :status="status" class="mb-10"/>

		<x-popup v-model="showPopup" :top="detail.imageurl!=''?'30vh':'50vh'">
			<view class="p-6 p-box flex-1">
				<view class="text-1 mb-2">({{detail.styleText}})</view>
				<view class="text-2 mb-2">{{detail.question}}</view>
				<image mode='aspectFit' v-if='detail.imageurl' :src="detail.imageurl"></image>

				<view>
					<view class="flex flex-row mb-2">
						<uni-icons type='checkbox-filled'  size='22'  color="#2979ff" v-if="detail.answer.includes('A')"></uni-icons>
						<uni-icons type='circle' size='22' color="#dfdfdf" v-else ></uni-icons>
						<view class="text-3">A.{{detail.a}}</view>
					</view>
					<view class="flex flex-row mb-2">
						<uni-icons type='checkbox-filled'  size='22'  v-if="detail.answer.includes('B')" color="#2979ff"></uni-icons>
						<uni-icons type='circle' size='22' color="#dfdfdf" v-else></uni-icons>
						<view class="text-3">B.{{detail.b}}</view>
					</view>
					<view class="flex flex-row mb-2" v-if='detail.c'>
						<uni-icons type='checkbox-filled'  size='22'  color="#2979ff" v-if="detail.answer.includes('C')"></uni-icons>
						<uni-icons type='circle' size='22' color="#dfdfdf" v-else ></uni-icons>
						<view class="text-3">C.{{detail.c}}</view>
					</view>
					<view class="flex flex-row" v-if='detail.d'>
						<uni-icons type='checkbox-filled'  size='22'  color="#2979ff" v-if="detail.answer.includes('D')"></uni-icons>
						<uni-icons type='circle' size='22' color="#dfdfdf" v-else></uni-icons>
						<view class="text-3">D.{{detail.d}}</view> 
					</view>
				</view>
				<view class="analysis mt-4 mb-4 p-3 rounded-3 text-white">
					{{detail.analysis}}
				</view>
			</view>
		</x-popup>
		
		<x-tabbar page="/pages/question/index" ></x-tabbar>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { $http } from '@/utils'
	const list = ref([])
	const list1 = ref<any>([])
	const list2 = ref<any>([])
	const showPopup = ref(false)
	const status = ref('more')
	const detail = ref({
		styleText: '',
		question: '',
		a: '',
		b: '',
		c: '',
		d: '',
		imageurl: '',
		answer: '',
		analysis: ''
	})
	const total = ref(0)
	const queryForm = ref({
		page: 1,
		limit: 20
	})
	const boxWidth = ref(375)

	onLoad(() => {
		uni.hideTabBar();
		getList()
		uni.getSystemInfo({
			success(res) {
				boxWidth.value = (res.screenWidth - 34) / 2
			}
		})
	})
	//获取题目
	const getList = (() => {
		status.value = 'more'
		$http.get('Questions/getList', { data: queryForm.value }).then(res => {
			total.value = res.data.total
			let data = res.data.data
			list.value.push.apply(list.value, data)
			if (list.value.length >= total.value) {
				status.value = 'noMore'
			}
			data.filter((item : any, index : number) => {
				if ((index + 1) % 2 === 0) {
					list2.value.push(item)
				} else {
					list1.value.push(item)
				}
			});
		})
	})
	//点击题目
	const selectQuestions = ((e : any) => {
		detail.value = e
		showPopup.value = true
	})

	//页面触底
	onReachBottom(() => {
		status.value = 'loading'
		queryForm.value.limit = 6
		queryForm.value.page++
		getList()
	})
</script>

<style lang="scss">
	.content {
		font-size: 28rpx;
		color: #383838;
	}

	.type {
		background-color: #2979ff;
		font-size: 22rpx;
	}

	.text-1 {
		font-size: 26rpx;
		color: #6a6a6a;
	}

	.text-2 {
		font-size: 30rpx;
		color: #4f4f4f;
		font-weight: 600;
	}

	.text-3 {
		font-size: 32rpx;
		color: #4f4f4f;
		font-weight: 500;
	}

	.analysis {
		font-size: 28rpx;
		background-color: #2979ff;
	}
	.p-box{
		overflow-y:auto;
		box-sizing: border-box;
	}
</style>